@import url(BoxTab.css);
@import url(TemplateTab.css);
@import url(SettingTab.css);

:root {
  --color-back: #adf;
  --color-bar: #3bf;
  --color-btn: #6cf;
  --color-buttom-btn: #08c;
  --color-flat-btn: #1af;
  --color-top: #cef;
}

html, body, #app-div {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-back);
}

button {
  border: none;
  background: var(--color-btn);
  font-size: 1em;
}

button.flat, .button-list button {
  background: none;
  color: var(--color-buttom-btn);
}

.button-list button:not(:first-child) {
  border-left: 2px solid var(--color-top);
}

nav {
  display: flex;
  justify-content: space-evenly;
  background: var(--color-bar);
}

.tab-button {
  padding: 5px;
  flex-grow: 1;
  background: inherit;
  font-size: 20px;
  filter: brightness(75%);
}

.tab .subnav {
  margin: 0 0 16px 0;
  padding: 8px;
  background: var(--color-bar);

  box-shadow: 0 0 10px #0006;
}

.tab .subnav button {
  box-shadow: 0 0 4px #0006;
  margin: 0 8px;
  padding: 4px 12px;
  border-radius: 4px;
}

.tab-button.active {
  filter: none;
}

.card {
  margin: 16px 16px;

  border-radius: 12px;
  box-shadow: 0 0 4px #0006;

  background: var(--color-top);
  transition: 300ms;
}

.card.active, .card:hover {
  box-shadow: 0 0 8px #0008;
}

.card h2 {
  padding: 4px;
  margin: 0;
  text-align: center;

  border-radius: 12px 12px 12px 12px;
  background: var(--color-bar);
  font-size: 1em;
}

.card h2.open {
  border-radius: 12px 12px 0 0;
}

.card .buttom {
  display: flex;
  justify-content: space-evenly;

  border-radius: 0 0 12px 12px;
  background: var(--color-btn);
}

.card .buttom button {
  padding: 4px;
  flex-grow: 1;
  background: none;
}
